<template>
	<div class="list-box">
		<div class="mui-content mui-scroll-wrapper-proudct" id="pullrefresh">
			<div class="mui-scroll">
				<ul class="mui-table-view ">
					<template v-for="(item,$key) in data">
						<li class="mui-table-view-cell mui-media">
							<router-link to="/">
								<img src="../../../static/banner.jpg" class="proudct-img-object mui-pull-left">
								<div class="mui-media-body">
									<h3 class="procut-info">
										<span class="product-title">{{item.title}}</span>
										<span class="compay-title">{{item.company.title}}</span> 
									</h3>
									<p class="mui-ellipsis">投保年龄：{{item.ageLimit}}</p>
									<p class="mui-ellipsis">投保期限：{{item.guaranteePeriod}}</p>
								</div>
							</router-link>
						</li>
					</template>
				</ul>
				<app-loading-more v-if="loading_more"></app-loading-more>
				<h3 class="none-data" v-if="none_data">没有更多的数据啦~~</h3>
			</div>
		</div>
	</div>	
</template>
<script>
	 import loadingMore from '../public/LoadMore.vue'
	 import {api} from '../../gloabl/api.js'
	export default{
		data:function(){
			return{
				data:[],
				loading_more:false,
				none_data:false,
				page:0,
				page_size:6
			}
		},
		components:{
			'app-loading-more':loadingMore
		},
		props:['where','keyword'],
		updated:function(){
			let vm = this;
			mui.init({
				pullRefresh:{
					container: '#pullrefresh',
					up: {
						contentnomore:'没有更多数据了',
						auto:false,
						height:50,//可选.默认50.触发上拉加载拖动距离
						contentrefresh: '正在努力加载中',
						callback: this.pullupRefresh
					}
				}
			})
		},
		created:function(){
			for(var i = mui.hooks.inits.length-1,item;i>=0;i--){
				item=mui.hooks.inits[i];
				if(item.name=="pullrefresh"){
					item.repeat=true;
				}
			}
		},
		mounted:function(){
			this.pullupRefresh();
		},
		methods:{
			pullupRefresh(){
				this.page = this.page+1;
				this.loading_more = true;
				let where = this.where;
				let me = this;
				let query = '{'+api.getProuctApi(where.com,where.product,this.page,this.page_size)+'}';
				this.$http.post(url.graphql,{query:query}).then((res)=>{
					let data = res.data.data.listProducts;
					if(data){
						for (let key in data) {
							me.data.push(data[key])
						}
					}
					if(!me.data.length){
						me.none_data = true;
					}else{
						me.none_data = false;
					}
					mui('#pullrefresh').pullRefresh().endPullupToRefresh();
					setTimeout(function(){
						me.loading_more = false;
					},2000)
				}).catch(function (error) {
					mui.alert('请求超时')
				})
			},
			getSelectData(){
				this.loading_more = true;
				let where = this.where;
				let me = this;
				let query = '{'+api.getProuctApi(where.com,where.product,this.page,this.page_size)+'}';
				this.$http.post(url.graphql,{query:query}).then((res)=>{
					me.data = res.data.data.listProducts;
					if(!me.data.length){
						me.none_data = true;
					}else{
						me.none_data = false;
					}
					mui('#pullrefresh').pullRefresh().endPullupToRefresh();
					setTimeout(function(){
						me.loading_more = false;
					},2000)
				}).catch(function (error) {
					mui.alert('请求超时')
				})
			},
			searchData(val){ //搜索数据
				this.loading_more = true;
				let me = this;
				let query = '{'+api.searchProductApi('"'+val+'"')+'}';
				me.$http.post(url.graphql,{query:query}).then((res)=>{
					
					let data = res.data.data.searchProducts;
					if(!data.length){
						me.none_data = true;
					}else{
						me.none_data = false;
					}
					me.data = data;
					setTimeout(function(){
						me.loading_more = false;
						
					},2000)
				}).catch(function (error) {
					mui.alert('请求超时')
				})
			}
		},
		watch:{
			where:{
				handler:function(val){
					this.page=1;
					this.getSelectData();
				},
				deep:true
			},
			keyword:function(val){
				this.searchData(val);
			}
		}
	}
</script>
<style scoped="scoped">
	.none-data{
		margin: 0;
		padding: 5px;
		font-size: 12px;
		color: #999999;
		text-align: center;
	}
	.mui-scroll-wrapper-proudct{
	    position: absolute;
		z-index: 2;
		top: 113px;
		bottom: 0px;
		left: 0;
		overflow: hidden;
		width: 100%;
	}
	#pullrefresh{
		padding-bottom: 60px;
	}
	.proudct-img-object{
		width: 92px;
		height: 70px;
		line-height: 70px;
		margin-right: 15px;
	}
	.procut-info{
		margin: 0;
		padding: 5px 0;
		text-align: left;
		font-size: 15px;
		overflow: hidden;
	}
	.mui-ellipsis{
		text-align: left;
		font-size: 12px;
		color: #999999;
	}
	.compay-title{
		padding: 5px 20px;
		color: #618DE4;
		border: 1px solid #618DE4;
		float: right;
		font-size: 12px;
		margin-top: -5px;
		border-radius: 10px;
		z-index: 3px;
	}
	.product-title{
		float: left;
		width: 160px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>